<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ $store.getters.name }}</div>
    <h1>{{ $store.state.msg }}</h1>
    <h1>{{ myMsg }}</h1>
    <h1>{{ msg }}</h1>
    <!-- 调用mutations中的函数必须通过以下语法
    $store.commit('函数名', 额外的参数) -->
    <button @click="$store.commit('setMsg', '777')">点我  修改msg值</button>
    <button @click="setMsg('888')">点我 -- 辅助函数  修改msg值</button>
    <!-- 调用actions中的函数 必须通过规定语法实现
    $store.dispatch('函数名') -->
    <button @click="$store.dispatch('asyncChangeMsg')">点我 -- actions  修改msg值</button>
    <!-- 获取 getters
中变量的语法：$store.getters.变量名
    -->
    <h2>{{ $store.getters.name }}</h2>
    <h2> getters 辅助函数： {{ name }}</h2>
    <!-- 调用user模块中mutations的函数，默认情况下可以 直接调用
    当添加命名空间后则需要通过模块名进行调用 -->
    <button @click="$store.commit('setToken', 1233)">点我，没有命名空间，调用user模块中的mutations函数</button>
    <button @click="$store.commit('user/setToken', 1233)">点我，调用user模块中的mutations函数</button>
    <!--
      获取模块中的变量语法：
      $store.state.模块名.变量名
     -->
    <h1>{{ $store.state.user.token }}</h1>
    <h1>辅助函数： {{ token }}</h1>
  </div>
</template>

<script>
import { mapGetters, mapState, mapMutations } from 'vuex'
// import { getUserInfo } from '@/api/user'
console.log(14, mapState(['msg'])) // 辅助函数其实就是已经帮我们写好了一个函数来获取msg变量
console.log(mapMutations(['setMsg']))
console.log(26, mapGetters(['name']))
export default {
  name: 'Dashboard',
  computed: {
    // 使用辅助函数读取模块里面的变量，我们必须先给辅助函数
    // 传递模块名，然后再用第二个参数来获取模块中的变量
    ...mapState('user', ['token']),
    ...mapGetters([
      'name'
    ]),
    myMsg: function() {
      return this.$store.state.msg
    },
    ...mapState(['msg'])
  },
  data() {
    return {
      // userInfo: {}
    }
  },
  async created() {
    // this.userInfo = await getUserInfo()
    // 不能在这里获取用户资料，因此数据需要全局使用，当跳转到其他页面的时候
    // 不会执行这里的代码，也就说当用户去到其他页面刷新浏览器的时候就请求不
    // 到数据了，因此我们可把获取用户资料的代码放到导航守卫中
    // this.$store.dispatch('user/getUserInfo')
    // 使用vuex中数据的语法：this.$store.state.变量名
    console.log(this.$store.state.msg)
  },
  methods: {
    ...mapMutations(['setMsg'])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
